import React from 'react';
import PropTypes from 'prop-types';
// import css from './index.less';
import TRANSITION_CONST from 'common/const/transition';
import ContentEditable from 'react-contenteditable';
import transContainer from 'modules/common/transitionContainer';

export default class Image extends React.Component {
  static propTypes = {
    mod: PropTypes.object.isRequired,
  };



  render() {
    const { mod } = this.props;
    // const { animation } = this.state;
    const props = {
      html: mod.textValue,
      disabled: false,
      onChange: (e) => {
        console.log('e.target.value', e.target.value);
        mod.update('textValue', e.target.value);
      },
      // style: {
      //   position: 'absolute',
      //   ...mod.style,
      //   animation
      // },
      // ref: 'node'
    };

    // 包装预制动效，必须传一个react组件
    const Node = transContainer(
      class extends React.Component {
        render() {
          return <ContentEditable {...this.props} ref="node"/>;
        }
      }, mod, props);
    return <Node />;

    // return (
    //   <ContentEditable {...props} />
    // );
  }
}
